import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

interface LineProps {
  title: string;
  xData: string[];
  yData: number[];
  style: React.CSSProperties;
}

const Line: React.FC<LineProps> = ({ title, xData, yData, style }: LineProps) => {
  const domRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    chartInit();
  }, []);

  const chartInit = () => {
    if (domRef.current) {
      const myChart = echarts.init(domRef.current);

      myChart.setOption({
        title: {
          text: title
        },
        tooltip: {},
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'line', // Change type to line for line chart
            data: yData
          }
        ]
      });
    }
  };

  return (
    <div>
      <div ref={domRef} style={style}></div>
    </div>
  );
};

export default Line;
